<template>
  <div class="execution">
    <basic-container>
      <avue-crud
        ref="crud"
        :page="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        @on-load="getList"
        @refresh-change="refreshChange"
        @search-reset="clearSearch"
        @selection-change="selectionChange"
        @search-change="searchChange"
      >
        <template slot="dataSourceNameSearch" slot-scope="scope">
          <el-select v-model="dataSourceName" filterable="true">
            <el-option v-for="item in dataSourceNames" :key="item.value" :lable="item.label" :value="item.value">
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.label }}</span>
              <span style="float: left">{{ item.value }}</span>
            </el-option>
          </el-select>
        </template>
        <template slot="searchMenu">
          <el-button type="primary" size="small" icon="el-icon-goods" @click="handleBatchGen()">批量生成代码</el-button>
        </template>
        <template
          slot="menu"
          slot-scope="scope"
        >
          <el-button
            type="text"
            icon="el-icon-view"
            size="mini"
            plain
            @click="showTableField(scope.row,scope.index)"
          >字段
          </el-button>
          <el-button
            type="text"
            icon="el-icon-sold-out"
            size="mini"
            plain
            @click="handleDown(scope.row,scope.index)"
          >生成
          </el-button>
          <el-button
            type="text"
            icon="el-icon-setting"
            @click="handleDesign(scope.row,scope.index)"
          >设计
          </el-button>
        </template>
      </avue-crud>

      <el-dialog
        title="生成配置"
        :visible.sync="box"
        width="70%"
        lock-scroll
      >
        <div class="pull-auto">
          <avue-form
            ref="formData"
            v-model="formData"
            :option="formOption"
            @reset-change="emptytChange"
            @submit="gen"
          />
        </div>
      </el-dialog>
      <el-dialog title="表字段" width="90%" :visible.sync="tableFieldDialogVisible">
        <tableFieldList :table-field-record="tableFieldRecord" @par="closeTableFieldDialog" />
      </el-dialog>
    </basic-container>
  </div>

</template>

<script>
import { fetchList, handleDown, batchGen } from '@/api/gen/gen'
import { fetchDataSource } from '@/api/gen/data-source-config'
import { formOption, tableOption } from '@/const/crud/gen/gen'
import tableFieldList from '../data-source-config/table-field'
import { mapGetters } from 'vuex'

export default {
  name: 'CodeGenerator',
  components: { tableFieldList },
  data() {
    return {
      isBatchGen: false,
      dataSourceMaintainVisible: false,
      tableFieldDialogVisible: false,
      tableData: [],
      formData: {},
      box: false,
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },
      dataSourceName: '',
      tableName: '',
      dataSourceNames: [],
      tableLoading: false,
      tableNames: '',
      singleGenTableName: '',
      tableOption: tableOption,
      formOption: formOption,
      tableFieldRecord: {
        dataSourceName: null,
        tableName: null
      }
      // 数据源维护页
    }
  },
  created() {
    this.loadDataSource()
  },
  mounted: function() {
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  methods: {
    emptytChange() {
      if (this.isBatchGen) {
        this.formData.tableName = this.tableNames
      } else {
        this.formData.tableName = this.singleGenTableName
      }
    },
    loadDataSource() {
      var _this = this
      const obj = []
      fetchDataSource().then(response => {
        response.data.forEach((item, index) => {
          obj.push({
            value: item.key,
            label: item.value
          })
        })
        _this.dataSourceNames = obj
      })
    },
    selectionChange(list) {
      if (list.length == 0) {
        this.tableNames = ''
      } else {
        let temp = ''
        list.forEach(item => {
          temp += item.tableName + ','
        })
        temp = temp.substr(0, temp.length - 1)
        this.tableNames = temp
      }
    },
    getList(page, params) {
      this.tableLoading = true
      if (!params) {
        try {
          params = this.$refs.crud.searchForm
        } catch (ex) {}
      }
      try {
        params.configValue = this.configValue
      } catch (ex) {}
      fetchList(Object.assign({
        current: page.currentPage,
        size: page.pageSize,
        dataSource: this.dataSourceName,
        tableName: this.tableName
      }, params)).then(response => {
        this.tableData = response.data.records
        this.page.total = response.data.total
        this.tableLoading = false
      })
    },
    closeTableFieldDialog: function() {
      this.tableFieldDialogVisible = false
    },
    showTableField: function(row, index) {
      this.tableFieldRecord.dataSourceName = this.dataSourceName
      this.tableFieldRecord.tableName = row.tableName
      this.tableFieldDialogVisible = true
    },
    handleDown: function(row, index) {
      this.singleGenTableName = row.tableName
      this.formData.tableName = row.tableName
      this.formData.dataSource = this.dataSourceName
      this.box = true
      this.isBatchGen = false
    },
    handleDesign: function(row) {
      this.$router.push({ path: '/gen/design', query: { tableName: row.tableName, dsId: this.dataSourceName }})
    },
    /**
       * 刷新回调
       */
    refreshChange() {
      this.getList(this.page)
    },
    clearSearch() {
      this.tableName = ''
      this.getList(this.page)
    },
    searchChange(form, done) {
      this.getList(this.page, form)
      done()
    },
    gen(form, done) {
      handleDown(this.formData).then(() => {
        this.box = false
        done()
      }).catch(function(err) {
        done()
      })
    },
    handleBatchGen() {
      if (this.tableNames == '') {
        this.$message.error('请选中表名后，再批量生产')
      } else {
        this.formData.tableName = this.tableNames
        this.formData.dataSource = this.dataSourceName
        this.box = true
        this.isBatchGen = true
      }
    },
    dataSourceMaintain() {
      this.dataSourceMaintainVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

